<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-11-21 16:10:08
 * @LastEditTime: 2024-11-22 22:16:49
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 
 * @FilePath: \markdown-magic\src\pages\Pdf\page\entry\editor\index1.vue
 * Copyright 版权声明
-->
<template>
  <div class="pageWrap">
    <div v-for="page in state.pdfPages" :key="page" class="pageItem" :id="`pageItem${page}`">
      <div :id="`textLayer${page}`" class="textLayer"></div>
      <div :id="`annotationsLayer${page}`" class="annotationsLayer"></div>
      <canvas :id="`pdfCanvas${page}`" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, computed, onMounted, nextTick } from 'vue'
import { message } from 'ant-design-vue'

import * as PDF from 'pdfjs-dist'
import * as workerSrc from 'pdfjs-dist/build/pdf.worker.min?url'

import $ from 'jquery'

import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer'
import 'pdfjs-dist/web/pdf_viewer.css'

PDF.GlobalWorkerOptions.workerSrc = workerSrc.default

// const pdf = './pdf_加水印.pdf'
const pdf = './pdf.pdf'

const state = reactive<any>({
  pdfPath: pdf, // 本地PDF文件路径放在/public中
  pdfPages: '', // 页数
  pdfWidth: '', // 宽度
  pdfSrc: '', // 地址
  pdfScale: 1.5, // 放大倍数
})
let pdfDoc: any = null
onMounted(() => {
  loadFile(state.pdfPath)
})
function loadFile(url: string) {
  PDF.getDocument(url).promise.then((p: any) => {
    pdfDoc = p
    const { numPages } = p
    state.pdfPages = numPages
    nextTick(() => {
      renderPage(1) // 从第一页开始渲染
    })
  })
}
function renderPage(num: number) {
  pdfDoc.getPage(num).then(async (page: any) => {
    const canvas: any = document.getElementById(`pdfCanvas${num}`)
    const ctx = canvas.getContext('2d')
    const dpr = window.devicePixelRatio || 1
    const bsr
        = ctx.webkitBackingStorePixelRatio
        || ctx.mozBackingStorePixelRatio
        || ctx.msBackingStorePixelRatio
        || ctx.oBackingStorePixelRatio
        || ctx.backingStorePixelRatio
        || 1
    const ratio = dpr / bsr
    const viewport = page.getViewport({ scale: state.pdfScale })
    canvas.width = viewport.width * ratio
    canvas.height = viewport.height * ratio
    canvas.style.width = '100%'
    canvas.style.height = '100%'
    state.pdfWidth = `${viewport.width}px`
    ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
    // 将 PDF 页面渲染到 canvas 上下文中
    const renderContext = {
      canvasContext: ctx,
      viewport,
    }
    // page.render(renderContext)
    await page.render(renderContext)

    // 添加文字层
    const textContent = await page.getTextContent()
    const textLayer = new PDF.TextLayer({
      textContentSource: textContent,
      viewport,
      container: document.getElementById('textLayer' + num),
    })
    await textLayer.render()

    // 添加注释层
    const annotationsContainer = document.getElementById('annotationsLayer' + num)
    annotationsContainer.innerHTML = '' // Clear the previous annotations
    page.getAnnotations().then((annotations) => {
      annotations.forEach((annotation) => {
        const rect = annotation.rect;
        const transformedRect = viewport.convertToViewportRectangle(rect)
        const annotationElement = document.createElement('div')
        annotationElement.style.position = 'absolute'
        annotationElement.style.left = `${transformedRect[0]}px`
        annotationElement.style.top = `${transformedRect[1]}px`
        annotationElement.style.width = `${transformedRect[2] - transformedRect[0]}px`
        annotationElement.style.height = `${transformedRect[3] - transformedRect[1]}px`
        annotationElement.style.border = '1px dashed red'
        annotationElement.style.backgroundColor = 'rgba(255, 255, 0, 0.5)'
        annotationElement.style.pointerEvents = 'auto'
        annotationElement.title = JSON.stringify(annotation, null, 2) // Show annotation details on hover
        annotationsContainer.appendChild(annotationElement)
      })
    })

    if (state.pdfPages > num)
      renderPage(num + 1)
  })
}

</script>

<style lang="scss" scoped>
html, body{
  width: 100%;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.pageWrap{
  .pageItem{
    position: relative;
    border: 1px solid #d4d2d2;
    margin-bottom: 8px;
    .textLayer,
    .annotationsLayer{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      // pointer-events: none;
      // width: 100%;
      // height: 100%;
    }
  }
}
</style>